page-tab-home {
  .scroll-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }


  .menu_top {
    height: 12.5vw;
    overflow: hidden;
    box-sizing: border-box;
    align-items: center;
    border-radius: 5px;
    padding: 0 5px;

    .menu_top_left {
      border-radius: 36px;
      width: 50%;

      .user {
        width: 30px;
        height: 30px;

        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }

      .user_info {
        justify-content: center;
        align-items: flex-start;

        div {
          line-height: 16px
        }

        .money_iocn {
          display: inline-block;
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          margin-right: 5px;
        }
      }
    }

    .menu_top_right {
      margin-left: 10%;
      width: 40%;

      div {
        padding: 0 5px;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .lottery_info {
    height: 44vw;
    background: url(../assets/icon/home_bannerbg.png) no-repeat;
    background-size: 100% 100%;

    .lottery_num {
      width: 96%;
      justify-content: space-between;

      span {
        height: 9vw;
        width: 8vw;
        line-height: 9vw;
        text-align: center;
        background: url(../assets/imgs/home/numberBg.png) no-repeat;
        background-size: 100% 100%;
        border-radius: 5px;
        margin-bottom: 10px;
        text-shadow: 0px 2px 2px #666;
        overflow: hidden;

        &:nth-child(odd) i {
          animation-delay: 200ms;
          animation-duration: 400ms
        }

        &:nth-child(even) i {
          animation-delay: 300ms;
          animation-duration: 400ms
        }

        &:last-child i {
          animation-delay: 500ms !important;
          animation-duration: 300ms !important;
          animation-timing-function: ease-out !important;
        }

        i {
          display: block;
          width: 58%;
          height: 75%;
          background: url(../assets/imgs/home/number1.png) no-repeat;
          background-size: 100% auto;
          background-position-x: 0px;
          background-position-y: 0px;
          transition: all 0.5s;
        }

        .red {
          background-image: url(../assets/imgs/home/number2.png) !important;
        }

        .img10 {
          background-position-y: -0.2%;
        }

        .img1 {
          background-position-y: 11%;
        }

        .img2 {
          background-position-y: 22.4%;
        }

        .img3 {
          background-position-y: 33.5%;
        }

        .img4 {
          background-position-y: 44.5%;
        }

        .img5 {
          background-position-y: 55.8%;
        }

        .img6 {
          background-position-y: 67%;
        }

        .img7 {
          background-position-y: 78.2%;
        }

        .img8 {
          background-position-y: 89.4%;
        }

        .img9 {
          background-position-y: 100.7%;
        }

      }
    }
  }

  @keyframes runNum {
    0% {
      background-position-y: 0%;
    }

    100% {
      background-position-y: 100%;
    }
  }

  .runNum {
    animation: runNum 300ms ease-in-out 100ms infinite alternate;
  }

  .record_info {
    width: 15%;
    height: 11%;
    right: 2%;
    top: 1%;
    text-align: center;
  }

  .record_info_scoll {
    height: 80%;
    overflow-y: scroll;
  }

  .point {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    background: white;
    border-radius: 50%;
    margin-right: 3px;
  }

  .lottery_next {
    height: 18%;
    bottom: 3%;
    left: 0;
    right: 0;
  }

  .rules {
    height: 10.5vw;
    overflow: hidden;
    background: #fff;
    border-radius: 50px;
    margin: 10px auto;

    img {
      width: 10.5vw;
      height: 10.6vw;
    }

    .rules_text {
      height: 7.5vw;
      line-height: 18px;
      padding: 5px;
      margin: 0 auto;
      animation: runRule 10s linear 1s infinite normal;
    }

    @keyframes runRule {
      0% {
        margin-top: 0px
      }

      25% {
        margin-top: 0px
      }

      100% {
        margin-top: -30vw
      }
    }
  }


  .goods {
    margin: 10px auto;
    overflow: hidden;

    .title {
      width: 50%;
      text-align: center;
      margin: 0 auto 1vh;

      img {
        width: 100%;
        height: auto;
      }
    }

    .goods_list {
      &:nth-child(even) {
        margin-right: 2%
      }

      width: 49%;
      margin-bottom: 5px;
      float: left;
      overflow: hidden;

      .goods_list_info {
        &:hover {
          -webkit-box-shadow: 0px 0px 5px rgba($color: #ff8500, $alpha: .4);
          box-shadow: 0px 0px 5px rgba($color: #ff8500, $alpha: .4);
        }

        border: 1px solid #eee;
        width:94%;
        margin: 5px auto;
        overflow: hidden;
        background: #fff;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);

        .goods_img_box {
          height: 45vw;
          width: 100%;
          overflow: hidden;

          img {
            max-width: 100%;
            height: auto;
          }
        }

        .goods_info {
          height: 11vw;
          width: 100%;
          background: linear-gradient(to bottom, #f3f3f3, #fff 50%, #f3f3f3);

          .goods_info_l {
            width: 70%;
            text-indent: 10px;

            .goods_info_price span:first-child {
              color: rgb(255, 109, 63);
            }

            .goods_info_price span:last-child {
              color: rgb(187, 187, 187);
              text-decoration: line-through
            }
          }

          .goods_info_r {
            width: 22%;
            background: #ff8500;
            border-bottom-left-radius: 25px;
            border-top-left-radius: 25px;
            text-align: center;
            height: 24px;
            line-height: 24px;
          }
        }
      }

    }
  }

  .modal_box {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: .4);
    z-index: 99;
    text-align: center;
  }

  .record_info_box {
    position: relative;
    height: 70%;
    width: 90%;
    background: #fff;
    border-radius: 6vw;
    overflow: hidden;

    .record_info_box_title {
      height: 10vw;

      .point {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid #ff8500;
      }
    }

    .record_info_box_close {
      position: absolute;
      width: 15%;
      height: auto;
      right: 0;
      top: 0;

      img {
        width: 100%;
        height: auto;
      }
    }

    .record_info_num_title {
      div {
        width: 30%;
        text-align: center;
      }

      .buy_type {
        display: inline-block;
        background: #ccc;
        border-radius: 24px;
        height: 24px;
        line-height: 24px;
        width: 24px;
      }

      width: 100%;
      background: #f2f2f2;
      height: 36px;
      line-height: 36px;
    }

    .record_info_num_list {
      div {
        width: 33.3%;
        text-align: center;
      }

      .luck_num {}

      width: 90%;
      margin: 0 auto;
      height: 50px;
      background: none !important;
      border-bottom: 1px solid #eee
    }
  }

  #top_conut_down {
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 0;
    background: #ff8500;
    opacity: 0;
    transition: all .5s;

    .top_conut_down_box {
      width: 98%
    }

  }

  .show {
    opacity: 1 !important;
    height: 10vw !important;
  }

  .next_time span {
    display: inline-block;
    font-size: 1.5rem;
    padding: 2px;
    min-width: 24px;
    background: #fff;
    color: #ff612f;
    margin: 0 4px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
  }

  .ion-navbar {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  i {
    font-style: normal;
    text-align: center;
  }

  .hide {
    opacity: 0 !important;
  }

  .hide_over {
    height: 100% !important;
    overflow: hidden !important;
  }

}
